<script setup lang="ts">
import type { EchartsUIType } from '@vben/plugins/echarts';

import { onMounted, ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

import { theme } from '../theme';

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
onMounted(() => {
  renderEcharts({
    // 暗色科技背景（通过外部容器实现）
    backgroundColor: 'transparent',
    // 霓虹科技配色
    color: ['#00f2fe', '#72f6a1', '#7d6df9', '#ff8a4c'],
    // 动态动画配置
    animation: true,
    animationDuration: 3000,
    animationEasing: 'cubicOut',

    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0,15,31,0.9)',
      borderColor: '#00f2fe',
      borderWidth: 1,
      textStyle: {
        color: '#c2e9ff',
        fontSize: 14,
      },
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: 'rgba(0,242,254,0.4)',
        },
      },
    },
    legend: {
      bottom: 0,
      textStyle: {
        color: '#5B8FF9',
        fontSize: 12,
      },
      icon: 'rect',
      itemWidth: 12,
      itemHeight: 4,
    },
    grid: {
      top: 40,
      left: 20,
      right: 20,
      bottom: 40,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
      axisLine: {
        lineStyle: {
          color: 'rgba(128,152,255,0.3)',
        },
      },
      axisLabel: {
        color: '#80a2ff',
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: 'rgba(128,152,255,0.1)',
        },
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: '#80a2ff',
      },
    },
    series: [
      {
        // 温度传感器
        name: '温度(℃)',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          width: 2,
          shadowBlur: 10,
          shadowColor: '#00f2fe',
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(0,242,254,0.6)',
              },
              {
                offset: 1,
                color: 'rgba(0,242,254,0)',
              },
            ],
          },
        },
        data: [24, 28, 36, 32, 29, 35, 31],
      },
      {
        // 压力传感器
        name: '压力(kPa)',
        type: 'line',
        smooth: true,
        symbol: 'triangle',
        symbolSize: 10,
        lineStyle: {
          width: 2,
          shadowBlur: 10,
          shadowColor: '#72f6a1',
        },
        data: [98, 105, 112, 108, 115, 122, 118],
      },
      {
        // 转速传感器
        name: '转速(rpm)',
        type: 'line',
        smooth: true,
        symbol: 'rect',
        symbolSize: 8,
        lineStyle: {
          width: 2,
          shadowBlur: 10,
          shadowColor: '#7d6df9',
        },
        data: [100, 120, 140, 110, 90, 80, 70],
      },
      {
        // 能耗监测
        name: '能耗(kW)',
        type: 'line',
        smooth: true,
        symbol: 'diamond',
        symbolSize: 10,
        lineStyle: {
          width: 2,
          shadowBlur: 10,
          shadowColor: '#ff8a4c',
        },
        data: [42, 46, 52, 48, 50, 55, 53],
      },
    ],
  });
});
</script>
<template>
  <div>
    <BorderBox11 :color="[theme.color, theme.color]">
      <div class="h-full w-full p-5 pt-16">
        <EchartsUI ref="chartRef" />
      </div>
    </BorderBox11>
  </div>
</template>
